<template>
  <div class="app-container">
    <div class="search-input-size" style="margin-bottom: 4px;">
      <el-date-picker
        v-model="searchDate"
        placeholder="选择时间"
        type="date"
        @change="dateChange"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-button type="primary" @click="fetchData()">查询</el-button>
    </div>
    <el-row>
      <div style="padding: 10px;background:#FED966;color: red;">
        {{ currentDate }}
      </div>
    </el-row>
    <template v-if="list === null">
      <div style="padding: 10px;">暂无数据</div>
    </template>
  <template v-for="item in list">
    <div class="group-name">{{ item.groupName }}</div>
    <el-table ref="multipleTable" :data="item.groupList" :summary-method="getSummaries" header-row-class-name="header-row" show-summary
              v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="优惠码" align="center">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="00:00至09:00" align="center">
        <template slot-scope="scope">
          {{scope.row.zero }}
        </template>
      </el-table-column>
      <el-table-column label="09:00至12:00" align="center">
        <template slot-scope="scope">
          {{scope.row.nine}}
        </template>
      </el-table-column>
      <el-table-column label="12:00至16:00" align="center">
        <template slot-scope="scope">
          {{scope.row.twelve}}
        </template>
      </el-table-column>
      <el-table-column label="16:00至18:30" align="center">
        <template slot-scope="scope">
          {{scope.row.sixteen}}
        </template>
      </el-table-column>
      <el-table-column label="18:30至00:00" align="center">
        <template slot-scope="scope">
          {{scope.row.eighteen}}
        </template>
      </el-table-column>
      <el-table-column label="合计" align="center">
        <template slot-scope="scope">
          {{scope.row.zero+scope.row.nine+scope.row.twelve+scope.row.zero+scope.row.sixteen+scope.row.eighteen}}
        </template>
      </el-table-column>
    </el-table>
  </template>

    <el-row>
      <div style="padding: 10px 50px;background:#FED966;color: red;margin-top:10px;text-align: right;">
          总计：{{ totalNum }}
      </div>
    </el-row>
    <el-button-group style="margin-top: 10px;">
      <el-button type="primary" size="mini" @click="prevDay()">前一天</el-button>
      <el-button type="primary" size="mini" @click="nextDay()">后一天</el-button>
    </el-button-group>
    <!--<div  style="padding: 1% 0%;text-align: right;background:#FED966; ">
      <label>总计</label>
      <label style="margin-right: 2%;" id="total">0</label>
    </div>-->

  </div>
</template>

<script>
  import { parseTime } from '@/utils/index'
  import { sheetApi } from '@/api/sheet'
  const zxData = require('@/../static/zx.json')
  export default {
    data() {
      return {
        listLoading: false,
        list: {},
        totalNum: 0,
        searchDate: '',
        currentDate: '',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }]
        }
      }
    },
    created() {
      this.fetchData()
      console.log(zxData)
    },
    methods: {
      fetchData() {
        this.listLoading = true
        sheetApi.getDailySales(this.searchDate).then(response => {
          this.list = this.makeList(response.data.list)
          this.currentDate = response.data.date
          this.listLoading = false
        })
      },
      makeList(list) {
        this.totalNum = 0
        /**
         * {
         *     "曾欢组": {
         *         groupName: "曾欢组",
         *         groupList: [
         *             {
         *                 name: "曾欢",
         *                 zero: 0,
         *                 nine: 0,
         *                 twelve: 0,
         *                 sixteen: 0,
         *                 eighteen: 0,
         *                 total: 0
         *             }
         *         ]
         *     }
         * }
         * @type {number}
         */
        if (list.length === 0) {
          return null
        }
        let totalNum = 0
        const finalList = {}
        list.forEach((column, index) => {
          totalNum += column.num
          console.log(index)
          const name = (column.coupon ? column.coupon : '') + (column.name ? column.name : '')
          if (column.name) {
            let findZX = false
            for (let i = 0; i < zxData.length; i++) {
              if (zxData[i].name === column.name) {
                findZX = true
                if (!finalList[zxData[i].group]) {
                  finalList[zxData[i].group] = {
                    groupName: zxData[i].group,
                    groupList: []
                  }
                }
                let hadMember = false
                for (let j = 0; j < finalList[zxData[i].group].groupList.length; j++) {
                  if (finalList[zxData[i].group].groupList[j].name === name) {
                    hadMember = true
                    finalList[zxData[i].group].groupList[j][column.timeBucket] = column.num
                    break
                  }
                }
                if (!hadMember) {
                  const member = {
                    name: name,
                    zero: 0,
                    nine: 0,
                    twelve: 0,
                    sixteen: 0,
                    eighteen: 0
                  }
                  member[column.timeBucket] = column.num
                  finalList[zxData[i].group].groupList.push(member)
                }
                break
              }
            }
            if (!findZX) {
              if (!finalList['其他']) {
                finalList['其他'] = {
                  groupName: '其他',
                  groupList: []
                }
              }
              let hadMember = false
              for (let j = 0; j < finalList['其他'].groupList.length; j++) {
                if (finalList['其他'].groupList[j].name === name) {
                  hadMember = true
                  finalList['其他'].groupList[j][column.timeBucket] = column.num
                  break
                }
              }
              if (!hadMember) {
                const member = {
                  name: name,
                  zero: 0,
                  nine: 0,
                  twelve: 0,
                  sixteen: 0,
                  eighteen: 0
                }
                member[column.timeBucket] = column.num
                finalList['其他'].groupList.push(member)
              }
            }
          } else {
            if (!finalList['其他']) {
              finalList['其他'] = {
                groupName: '其他',
                groupList: []
              }
            }
            let hadMember = false
            for (let j = 0; j < finalList['其他'].groupList.length; j++) {
              if (finalList['其他'].groupList[j].name === name) {
                hadMember = true
                finalList['其他'].groupList[j][column.timeBucket] = column.num
                break
              }
            }
            if (!hadMember) {
              const member = {
                name: name,
                zero: 0,
                nine: 0,
                twelve: 0,
                sixteen: 0,
                eighteen: 0
              }
              member[column.timeBucket] = column.num
              finalList['其他'].groupList.push(member)
            }
          }
        })
        this.totalNum = totalNum
        return finalList
      },
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[0] = '汇总'
            return
          }
          let num = 0
          data.forEach((col, i) => {
            if (index === 1) {
              num += col.zero
            } else if (index === 2) {
              num += col.nine
            } else if (index === 3) {
              num += col.twelve
            } else if (index === 4) {
              num += col.sixteen
            } else if (index === 5) {
              num += col.eighteen
            } else if (index === 6) {
              num += col.zero + col.nine + col.twelve + col.sixteen + col.eighteen
            }
          })
          sums[index] = num
        })
        return sums
      },
      // var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
      // var nextDate = new Date(curDate.getTime() + 24*60*60*1000); //后一天
      prevDay() {
        this.searchDate = parseTime(new Date(new Date(this.currentDate).getTime() - 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
        this.fetchData()
      },
      nextDay() {
        if (new Date(new Date(this.currentDate).getTime() + 24 * 60 * 60 * 1000) > new Date().getTime()) {
          this.$message({ message: '最高日期不能超过今天.', type: 'warning' })
          return
        }
        this.searchDate = parseTime(new Date(new Date(this.currentDate).getTime() + 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
        this.fetchData()
      },
      dateChange() {
        const now = new Date()
        if (new Date(this.searchDate).getTime() > now.getTime()) {
          this.$message({ message: '最高日期不能超过今天.', type: 'warning' })
          this.searchDate = now
        }
      }
    }
  }
</script>
<style>
  .header-row th {
    background-color: #f5f7fa;
  }
  .group-name {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding: 10px;
    background-color: #cccccc;
    margin-top: 10px;
  }
</style>
